<template>
    <div class="wallet-page">
		<div class="wallet-info flex f-be f-mi">
			<div class="">
				<span class="fw-6 fs-16">当前积分：</span>
				<span class="t fs-24">{{pointsTotal}}</span>
			</div>
			<div class="">
				<el-button class="cz-btn marg-B1" @click="recharge">前往充值</el-button>
				<el-button v-if="$store.state.shopId == 0" class="zg-btn" @click="changeOther">转给他人</el-button>
			</div>
		</div>
		<div class="tab-box">
            <div class="tab-list">
                <div class="items" v-for="(item,index) in pointsList" :key="index" :class="activeIndex === index ? 'active':'defau'" @click="tabClick(item,index)">{{item.name}}</div>
            </div>
		</div>
        <el-table v-loading="loading" :header-cell-style="headerStyle" :data="tableData" style="width: 100%">
			<el-table-column prop="create_time" label="时间" :align="center">
			</el-table-column>
			<el-table-column prop="content" label="项目" :align="center">
			</el-table-column>
			<el-table-column prop="type" label="收支" :align="center">
				<template slot-scope="scope">
					<span style="color:#2A82E4;" v-if="scope.row.type == 1">+{{scope.row.money}}</span>
					<span style="color:#FF8D1A;" v-else>-{{scope.row.money}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="操作" :align="center">
				<template slot-scope="scope">
					<el-button v-if="scope.row.operation_type == 1" class="btn" type="text" @click="viewClick(scope.row)">查看</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="page" v-if="total > 0" >
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="currentPage"
				:page-size="pageSize"
				layout="prev,pager,next,total"
				:total="total">
			</el-pagination>
		</div>
		<pointsDialog :isTrans="isTrans" :depList="depList" @intergralOther="intergralOther" @transferClose="transferClose"/>
		<integralChange :isIntergral="isIntergral" :pointsTotal="pointsTotal" :integralData="integralData" @integralClose="integralClose"/>
		<recharge :isDialog="isDialog" @dialogSave="dialogSave" @closeClick="closeClick"/>
		<editDialogVue :clueType="clueType" :isEditDialog="isEditDialog" :editInfo="editInfo" :noteList="noteList" @editClose="editClose"/>
	</div>
</template>
<script>
import recharge from './recharge.vue'
import pointsDialog from './pointsDialog'
import {request} from "@/assets/js/utils/request"
import integralChange from './integralChange'
import editDialogVue from './editDialog.vue'
export default {
    components: {
        recharge,
		pointsDialog,
		integralChange,
		editDialogVue
    },
    data() {
        return{
			loading: false,
			activeName: 1,
			headerStyle: {
                background: '#F2F8FF',
                color: '#2A82E4',
            },
			isDialog: false,
			isTrans: false,
			tableData: [],
			center: 'center',
			currentPage: 1,
            pageSize: 10,
            total: 0,
			dataList: [],
			pointsList: [],
			activeIndex: 0,
			pointsTotal: 0,
			pointsType: 1,
			depList: [],
			isIntergral: false,
			integralData: {},
			isEditDialog: false,
			editInfo: {},
			noteList: [],
			clueType: ''
        }
    },
	created() {
		this.initData()
		this.getPointsData()
		this.getMyPointS()
		if(this.$store.state.shopId == 0) {
            this.getDepartData()
        }
	},
	methods: {
		getClueData() {
            request({
                url: '/config/note',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.noteList = res.data.list || []
                }
            })
		},
		// 编辑
        editClose() {
            this.isEditDialog = false
            this.initData()
        },
		// 查看记录
        viewClick(params) {
			request({
                url: `/user/clue/${params.order_id}`,
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
					this.clueType = 'view'
					this.isEditDialog = true
					this.editInfo = res.data.detail
                }
            })
        },
		dialogSave() {
			this.isDialog = false
		},
		closeClick() {
			this.isDialog = false
		},
		integralClose() {
			this.isIntergral = false
			this.initData()
			this.getMyPointS()
		},
		intergralOther(params) {
			this.isIntergral = true
			this.isTrans = false
			this.integralData = params
		},
		getDepartData() {
            request({
                url: '/user/branch/list',
                method: 'GET',
            }).then(res => {
                if(res.code == 200) {
                    this.depList = res.data.list
                } else {
                    this.$message.error(res.message);
                }
            })
        },
		handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.initData()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.initData()
        },
		tabClick(item,index) {
            this.activeIndex = index
			this.pointsType = item.id
			this.currentPage = 1
            this.initData()
        },
		transferClose() {
			this.isTrans = false
			this.initData()
		},
		recharge() {
			this.isDialog = true // 充值弹框
			// recharge
			// this.$router.push('/rechargePage')
		},
		changeOther() {
			this.isTrans = true
		},
		handleClick(tab, event) {
			// this.activeName = 
		},
		getPointsData() {
			// 积分类型			
			request({
				url: `/config/money/type`,
				method: 'GET'
			}).then(res => {
				if(res.code == 200) {
					this.pointsList = res.data.list || []
				} else {
					this.$message.error(res.message);
				}
			})
		},
		getMyPointS() {
			request({
				url: `/user/money/balance`,
				method: 'get'
			}).then(res => {
				if(res.code == 200) {
					this.pointsTotal = res.data.balance
				} else {
					this.$message.error(res.message);
				}
			})
		},
		initData() {
			request({
				url: `/user/money/list?page=${this.currentPage}&operation_type=${this.pointsType}`,
				method: 'get'
			}).then(res => {
				if(res.code == 200) {
					this.tableData = res.data.list || []
					this.total = res.data.quantity
				}
			})
		}
	}
}
</script>
<style lang="less" scoped>
.wallet-page{
		padding: 20px;
		border-radius: 8px;
		background: #fff;

		.wallet-info{
			padding: 20px 26px;
			border-radius: 6px;
			// background: #FFD0A1;
			.t{
				color: #FF5733;
			}
			.cz-btn{
                padding: 0;
				width: 92px;
				height: 30px;
				font-size: 16px;
				line-height: 30px;
				font-weight: 500;
				color: #fff;
				border-radius: 15px;
				background: rgba(255, 141, 26, 1);
			}
			.zg-btn{
                padding: 0;
				width: 92px;
				height: 30px;
				font-size: 16px;
				line-height: 30px;
				font-weight: 500;
				color: #fff;
				border-radius: 15px;
				background: rgba(42, 130, 228, 1);
			}
		}
		/deep/.tab-box{
			margin-bottom: 10px;
			.tab-list{
				display: flex;
				.items{
					text-align: center;
					line-height: 40px;
					position: relative;
					font-size: 14px;
					cursor: pointer;
					margin: 0 14px;
				}
				.defau{
					color: #808080;
				}
				.active{
					color: #222E4F;
					border-bottom: 2px solid #2A82E4;
				}
			}
			.el-input{
				width: 100%;
				.el-input__inner{
					height: 32px;
					border-radius: 35px;
				}
			}
			.el-input__icon{
				line-height: 32px;
			}
		}
		// .tab-box{
		// 	display: flex;
		// 	justify-content: space-between;
		// 	padding: 0 15px;
		// 	margin-bottom: 10px;
		// 	.items{
		// 		color: #808080;
		// 		height: 40px;
		// 		line-height: 40px;
		// 	}
		// 	.active{
		// 		color: #2A82E4;
		// 		border-bottom: 2px solid #2A82E4;
		// 	}
		// }
		.inte-info{
			border-bottom: 1px solid #EDF5FF;
			margin-bottom: 10px;
			.team-content{
				padding: 10px 0;
				border-bottom: 1px solid #ddd;
			}
			.inte-name{
				height: 33px;
				line-height: 33px;
				display: flex;
				justify-content: space-between;
				background: #EDF5FF;
				color: #2573CC;
				div{
					width: 30%;
					font-size: 14px;
					text-align: center;
				}
			}
			.inte-content{
				height: 33px;
				line-height: 33px;
				display: flex;
				justify-content: space-between;
				color: #616161;
				div{
					width: 30%;
					font-size: 13px;
					text-align: center;
				}
			}
		}
		// .btn{
		// 	padding: 0;
		// 	font-size: 14px;
		// 	font-weight: 500;
		// 	color: rgba(131, 140, 161, 1);
		// 	width: 53px;
		// 	height: 29px;
		// 	line-height: 29px;
		// 	border-radius: 5px;
		// 	background: rgba(255, 255, 255, 1);
		// 	border: 1px solid rgba(131, 140, 161, 1);
		// }
	}
</style>